<#include "../common/header.htm">
<div class="content-wrapper">
	<section class="content">
		<div class="bill-right">
			<form id="listForm">
				<div class="box">
					<div class="box-header">
						<div class="row RowSearchWork">
							<div class="col-sm-12">
								<div class="form-group">
			                        <div class="form-inline">

			                        	<div class="form-group ml10 form_z">
			                                <label class="control-label">交易日期</label>
			                                <div class="input-group">
				                                <div class="input-icon-group">
											        <input type="text" class="form-control fc-clear form_datetime" id="starTime" /> 
											        <span id="scan" class="glyphicon glyphicon-calendar"> 
											        </span>
											    </div>
										    </div>
			                            </div>
			                            <div class="form-group">
			                                <label class="control-label refsh"> 至 </label>
			                                <div class="input-group">
				                                <div class="input-icon-group">
											        <input type="text" class="form-control fc-clear form_datetime" id="endTime" /> 
											        <span id="scan" class="glyphicon glyphicon-calendar"> 
											        </span>
											    </div>
										    </div>
			                            </div>
			                            <div class="form-group ml10">
			                                <label class="control-label">金额</label>
			                                <input type="text" class="form-control" id="minmoney" name="minmoney" value="" placeholder="" />
			                            </div>
										<div class="form-group ml10">
											<label class="control-label refsh">至</label>
											<input type="text" class="form-control" id="maxmoney" name="maxmoney" value="" placeholder="" />
										</div>
										<div class="form-group">
											<label class="control-label hidden-xs">关键字</label>
											<input type="text" class="form-control" id="keyword" value="" placeholder="摘要、备注、MAC、IP地址" />
										</div>
										<div class="form-group bill-buttonarea ml10"  style="text-align: center;">
											<input type="button" class="btn btn-primary" onclick="queryList();" value="分析" />
											<input type="button" class="btn btn-default" onclick="reset();" value="重置" />
											<input type="button" class="btn btn-primary daobtn" onclick="exportList();" value="导出" />
										</div>
			                        </div>
		                        </div>
							</div>
						</div>
					</div>
					<div class="box-body">
                        <div class="casemanage-switchtip">
                            <div class="casemanage-zhexiantu " :class="{active:showType==1}" @click="showType=1" onClick="showType(1)" title="切换为列表显示">
								<i class="casemanage-switchtip-list"></i><span>列表</span>
                            </div>
                            <div class="casemanage-list" :class="{active:showType==0}" @click="showType=0" onClick="showType(0)" title="切换为图表显示">
								<i class="casemanage-switchtip-chart"  id="font_zhexian"></i><span>图表</span>
                            </div>
                        </div>
						<div id="spantitle" class="title" style="height: 30px"></div>
						<div  id="tableShow">
							<table id="table"></table>
						</div>
                        <div  style="height: 300px;margin: 10px 10px 30px;" id="mainShow">
                            <div id="main" style="height:300px;"></div>
                        </div>

					</div>
				</div>
			</form>
		</div>
	</section>

</div>
<script type="text/javascript">
    function refreshSize(){
        var totolHeight =  document.documentElement.clientHeight;
        var height = totolHeight - 150;
        console.log(totolHeight + ' - ' + height);
        document.getElementById('table').style.height = height+'px';
    };
    refreshSize();
    window.onresize = refreshSize;
	var caseId=parent.caseId;
	$(document).ready(function(){
		$(window).resize(function(){
			$('#table').datagrid('resize',{
                height:($(window).height())-($('.box-header').outerHeight(true))-($('#spantitle').outerHeight(true))-30,
			});
		});
	})
	$(".form_datetime").datepicker({
	    format: "yyyy-mm-dd",
	    autoclose: true,
	    language:'zh-CN',
	    pickerPosition:"bottom-left"
	  });
    $("#listForm").validate({
        rules: {
            minmoney : {
                digits:true
            },
            maxmoney : {
                digits:true
            }
        },
        messages: {
        }
    });
    var billCash = new Vue({
        el:".box-body",
        data:{
            showType:1
        }
    });
    function showType(type) {
        if (type==1) {
            $("#showType").val("1");
            $("#tableShow").show();
            $("#mainShow").hide();

        }else {
            $("#showType").val("0");
            $("#tableShow").hide();
            $("#mainShow").show();

        }
    }
    var spantitle = $("#spantitle");
    spantitle.html('<span><a class="listap" style="cursor:pointer;" onclick="queryList()">现金交易分析</a></span>');
    window.onload= firstTable;
	function firstTable() {
        let money = $.trim($("#minmoney").val());
        let maxmoney = $.trim($("#maxmoney").val());
        let keyword = $.trim($("#keyword").val());
        let starTime = $.trim($("#starTime").val());
        let endTime = $.trim($("#endTime").val());
        $('#table').datagrid({
            url: '${ctx}/bill/tj/billCashList',
            fitColumns:true,
            queryParams: {
                    detailKeyword:keyword,
                    checkedAccount:parent._checkedAccount.join(','),
                    minMoney:money,
                    maxMoney:maxmoney,
                    casemanageId:caseId,
                    starTime:starTime,
                    endTime:endTime,
			},
			height:($(window).height())-($('.box-header').outerHeight(true))-($('#spantitle').outerHeight(true))-30,
            pageNumber:1,
            pageSize:30,
            pageList:[30,50,100,150,200],
            pagination:true,
            singleSelect: true,
            rownumbers: true,//行号
            columns: [[
                {
                    field: 'accountBodyNumber',//域值
                    title: '交易主体账号',//内容
                    visible: true,//false表示不显示
                },
                {
                    field: 'accountBody',//域值
                    title: '交易主体',//标题
                    visible: true,//false表示不显示
                    sortable: false,//启用排序
                    formatter:function (value,row) {
                        if (row.BODY_TYPE) {
                            return value+'<span class="badge" style="color: white;">'+row.BODY_TYPE +'</span>';
                        }else {
                            return value
                        }
                    }
                },
                /*{
                    field: 'accountBodyCard',//域值
                    title: '交易主体卡号',//内容
                    visible: true,//false表示不显示
                },*/
                {
                    field: 'totalMoney',//域值
                    title: '现金总金额',//内容
                    sortable: true,//启用排序
                    visible: true,//false表示不显示
                    formatter:function (value,row,index) {
                        if(!value) return 0;
                        if (Number.isInteger(value)) {
                            return value.toString().replace(/(\d)(?=(\d{3})+$)/g,'$1,');
                        } else {
                            return value.toString().replace(/(\d)(?=(\d{3})+\.)/g,'$1,');
                        }
                    }
                },
                {
                    field: 'totalCount',//域值
                    title: '总次数',//内容
                    sortable: true,//启用排序
                    visible: true,//false表示不显示
                },
                {
                    field: 'outMoney',//域值
                    title: '取现总金额',//内容
                    sortable: true,//启用排序
                    visible: true,//false表示不显示
                    formatter:function (value,row,index) {
                        if(!value) return 0;
                        if (Number.isInteger(value)) {
                            return value.toString().replace(/(\d)(?=(\d{3})+$)/g,'$1,');
                        } else {
                            return value.toString().replace(/(\d)(?=(\d{3})+\.)/g,'$1,');
                        }
                    }
                },
                {
                    field: 'outCount',//域值
                    title: '取现总次数',//内容
                    sortable: true,//启用排序
                    visible: true,//false表示不显示
                },
                {
                    field: 'outMoneyPercent',//域值
                    title: '取现金额比',//内容
                    visible: true,//false表示不显示
                },
                {
                    field: 'outCountPercent',//域值
                    title: '取现次数比',//内容
                    visible: true,//false表示不显示
                },
                {
                    field: 'inMoney',//域值
                    title: '存现总金额',//内容
                    sortable: true,//启用排序
                    visible: true,//false表示不显示
                    formatter:function (value,row,index) {
                        if(!value) return 0;
                        if (Number.isInteger(value)) {
                            return value.toString().replace(/(\d)(?=(\d{3})+$)/g,'$1,');
                        } else {
                            return value.toString().replace(/(\d)(?=(\d{3})+\.)/g,'$1,');
                        }
                    }
                },
                {
                    field: 'inCount',//域值
                    title: '存现总次数',//内容
                    sortable: true,//启用排序
                    visible: true,//false表示不显示
                },
                {
                    field: 'inMoneyPercent',//域值
                    title: '存现金额比',//内容
                    visible: true,//false表示不显示
                },
                {
                    field: 'inCountPercent',//域值
                    title: '存现次数比',//内容
                    visible: true,//false表示不显示
                },
                {
                    field: 'percent',//域值
                    title: '详细',//内容
                    align:'center',
                    visible: true,//false表示不显示
                    formatter: function(value, row, index){
                        var html='<a class="like" href="javascript:void(0)" onclick="showDetail(\''+row.accountBodyCard+'\')" title="Like">查看</a>'
                        return html;
                    }
                }
            ]],
            onLoadSuccess:function (result) {
                var data = result.rowsten;
                if (data){
                    var xAxis = data.map(m => m.accountBodyCard);
                    var echarts_data1 = data.map(m => m.inMoney);
                    var echarts_data2 = data.map(m => m.outMoney);
                    showEcharts('现金交易分析',xAxis,echarts_data1,echarts_data2);
                }else {
                    showEcharts('现金交易分析',"",[],[]);
                }
                $("#tableShow").show();
                $("#mainShow").hide();
            }
        });
    }
    function showDetail(rivalCard) {
        spantitle.html('<span><a class="listap" style="cursor:pointer;" onclick="queryList()">现金交易分析</a></span>').append('<span> > <a class="listap" style="cursor:pointer;" onclick="showDetail(\''+rivalCard+'\')">交易详情</a></span>');
        let money = $.trim($("#minmoney").val());
        let maxmoney = $.trim($("#maxmoney").val());
        let keyword = $.trim($("#keyword").val());
        let starTime = $.trim($("#starTime").val());
        let endTime = $.trim($("#endTime").val());
        var opt =$('#table').datagrid('options');
        opt.sortName = "";
        opt.sortOder = "";
        $('#table').datagrid({
            url: '${ctx}/bill/tj/billCashDetail',
            queryParams: {
                detailKeyword:keyword,
                accountBodyCard:rivalCard,
                minMoney:money,
                maxMoney:maxmoney,
                casemanageId:caseId,
                starTime:starTime,
                endTime:endTime,
            },
            height:($(window).height())-($('.box-header').outerHeight(true))-($('#spantitle').outerHeight(true))-30,
            fitColumns:true,
            // fit: true,
            rownumbers: true,//行号
            pageNumber:1,
            pageSize:30,
            pageList:[30,50,100,150,200],
            pagination:true,
            singleSelect: true,
            columns: [[
                {
                    field: 'ACCOUNT_BODY_NUMBER',//域值
                    title: '交易主体账号',//内容

                },
                {
                    field: 'ACCOUNT_BODY',//域值
                    title: '交易主体',//标题
                    sortable: false,//启用排序
                    formatter:function (value,row) {
                        if (row.BODY_TYPE) {
                            return value+'<span class="badge" style="color: white;">'+row.BODY_TYPE +'</span>';
                        }else {
                            return value
                        }
                    }
                },

               /* {
                    field: 'ACCOUNT_BODY_CARD',//域值
                    title: '交易主体卡号',//内容
                    formatter:function (value) {
                        if (value){
                            return '<a onclick="showAccountBody(\''+value+'\')" style="cursor:pointer;">'+value+'</a>'
                        }
                    }
                },*/
                {
                    field: 'SIGN',//域值
                    title: '收付标志',//内容
                    formatter: function(value, row, index){
                        if(value){
                            return '支出';
                        }else{
                            return '收入';
                        }
                    }
                },
                {
                    field: 'TRADE_DATE',//域值
                    title: '交易时间',//内容
                    sortable: true,//启用排序
                    formatter: function(value, row, index) {
                        if (value){
                            var date = new Date(value);
                            return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
                        }else {
                            return "";
                        }
                    }
                },
                {
                    field: 'ACCOUNT_RIVAL',//域值
                    title: '交易对手',//内容
                },
                {
                    field: 'ACCOUNT_RIVAL_NUMBER',//域值
                    title: '交易对手账号',//内容
                    formatter:function (value) {
                        if (value){
                            return '<a onclick="showAccountBody(\''+value+'\')" style="cursor:pointer;">'+value+'</a>'
                        }
                    }
                },
                {
                    field: 'ACCOUNT_RIVAL_CARD',//域值
                    title: '交易对手卡号',//内容
                    formatter:function (value) {
                        if (value){
                            return '<a onclick="showAccountBody(\''+value+'\')" style="cursor:pointer;">'+value+'</a>'
                        }
                    }
                },
                {
                    field: 'ACCOUNT_MONEY',//域值
                    title: '交易金额',//内容
                    sortable: true,//启用排序
                },
                {
                    field: 'SURPLUS_MONEY',//域值
                    title: '交易后余额',//内容
                    sortable: true,//启用排序
                },
                {
                    field: 'CONTENT_ABSTRACT',//域值
                    title: '摘要',//内容
                },
                {
                    field: 'TELLER_NUMBER',//域值
                    title: '柜员号',//内容
                },{
                    field: 'TRADING_ORGANIZATION_NUMBER',//域值
                    title: '交易机构号',//内容
                },{
                    field: 'INSTITUTION_NUMBER',//域值
                    title: '对方机构号',//内容
                },
                {
                    field: 'ACCOUNT_BODY_BANK',//域值
                    title: '交易主体归属行',//内容
                },
                {
                    field: 'ACCOUNT_RIVAL_BANK',//域值
                    title: '交易对手归属行',//内容
                },
                {
                    field: 'ACCOUNT_ADDRESS',//域值
                    title: '交易地点',//内容
                },
                {
                    field: 'ACCOUNT_MODE',//域值
                    title: '交易方式',//内容
                },
                {
                    field: 'SERIAL_NUMBER',//域值
                    title: '交易流水号',//内容
                },
                {
                    field: 'MAC_ADDRESS',//域值
                    title: 'MAC地址',//内容
                },
                {
                    field: 'IP_ADDRESS',//域值
                    title: 'IP地址',//内容
                },
                {
                    field: 'CURRENCY',//域值
                    title: '币种',//内容
                },
                {
                    field: 'REMARKS',//域值
                    title: '备注',//内容
                }
            ]],
		});

    }

    function showAccountBody(bodynumber) {
        spantitle.append('<span><span class="spantitmb"> > </span><a class="listap" onclick="showAccountBody(\''+bodynumber+'\')" style="cursor:pointer;">'+bodynumber+'</a></span>');
        var opt =$('#table').datagrid('options');
        opt.sortName = "";
        opt.sortOder = "";
        $('#table').datagrid({
            url:"${ctx}/bill/stream/bank/body",//请求数据url
            fitColumns:true,
            // fit: true,
            rownumbers: true,//行号
            queryParams: {
                bodyNumber:bodynumber,
                casemanageId:caseId
			},
            height:($(window).height())-($('.box-header').outerHeight(true))-($('#spantitle').outerHeight(true))-30,
            pageNumber:1,
            pageSize:30,
            pageList:[30,50,100,150,200],
            pagination:true,
            singleSelect: true,
            columns: [[
                {
                    field: 'ACCOUNT_BODY',//域值
                    title: '交易主体',//标题
                    sortable: false,//启用排序
                    formatter:function (value,row) {
                        if (row.BODY_TYPE) {
                            return value+'<span class="badge" style="color: white;">'+row.BODY_TYPE +'</span>';
                        }else {
                            return value
                        }
                    }
                },
                {
                    field: 'ACCOUNT_BODY_NUMBER',//域值
                    title: '交易主体账号',//内容
                },
                {
                    field: 'ACCOUNT_BODY_CARD',//域值
                    title: '交易主体卡号',//内容
                },
                {
                    field: 'SIGN',//域值
                    title: '收付标志',//内容
                    formatter: function(value, row, index){
                        if(value){
                            return '支出';
                        }else{
                            return '收入';
                        }
                    }
                },
                {
                    field: 'TRADE_DATE',//域值
                    title: '交易时间',//内容
                    sortable: true,//启用排序
                    formatter: function(value, row, index){
                        if(value){
                            var date = new Date(value);
                            return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
                        }else{
                            return '-';
                        }
                    }
                },
                {
                    field: 'ACCOUNT_RIVAL',//域值
                    title: '交易对手',//内容
                },
                {
                    field: 'ACCOUNT_RIVAL_NUMBER',//域值
                    title: '交易对手账号',//内容
                    formatter:function (value) {
                        if (value){
                            return '<a onclick="showAccountBody(\''+value+'\')" style="cursor:pointer;">'+value+'</a>'
                        }
                    }
                },
                {
                    field: 'ACCOUNT_RIVAL_CARD',//域值
                    title: '交易对手卡号',//内容
                    formatter:function (value) {
                        if (value){
                            return '<a onclick="showAccountBody(\''+value+'\')" style="cursor:pointer;">'+value+'</a>'
                        }
                    }
                },
                {
                    field: 'ACCOUNT_MONEY',//域值
                    title: '交易金额',//内容
                    sortable: true,//启用排序
                },
                {
                    field: 'SURPLUS_MONEY',//域值
                    title: '交易后余额',//内容
                    sortable: true,//启用排序
                },
                {
                    field: 'CONTENT_ABSTRACT',//域值
                    title: '摘要',//内容
                },
                {
                    field: 'TELLER_NUMBER',//域值
                    title: '柜员号',//内容
                },{
                    field: 'TRADING_ORGANIZATION_NUMBER',//域值
                    title: '交易机构号',//内容
                },{
                    field: 'INSTITUTION_NUMBER',//域值
                    title: '对方机构号',//内容
                },
                {
                    field: 'ACCOUNT_BODY_BANK',//域值
                    title: '交易主体归属行',//内容
                },
                {
                    field: 'ACCOUNT_RIVAL_BANK',//域值
                    title: '交易对手归属行',//内容
                },
                {
                    field: 'ACCOUNT_ADDRESS',//域值
                    title: '交易地点',//内容
                },
                {
                    field: 'ACCOUNT_MODE',//域值
                    title: '交易方式',//内容
                },
                {
                    field: 'SERIAL_NUMBER',//域值
                    title: '交易流水号',//内容
                },
                {
                    field: 'MAC_ADDRESS',//域值
                    title: 'MAC地址',//内容
                },
                {
                    field: 'IP_ADDRESS',//域值
                    title: 'IP地址',//内容
                },
                {
                    field: 'CURRENCY',//域值
                    title: '币种',//内容
                },
                {
                    field: 'REMARKS',//域值
                    title: '备注',//内容
                }
            ]],
            onLoadSuccess: function (result) {

                $("span").click(function(){
                    $(this).nextAll("span").remove();
                });
            },
		});

    }

	 /*bootstrap table*/
	 function queryList(){
         spantitle.html('<span><a class="listap" style="cursor:pointer;" onclick="queryList()" > 现金交易分析</a></span>');
         var opt =$('#table').datagrid('options');
         opt.sortName = "";
         opt.sortOder = "";
         firstTable();
	 }
	 function reset(){
		 $("#money").val('');
		 $("#keyword").val('');
		 $("#starTime").val('');
		 $("#endTime").val('');
	 }
	 function exportList(){
		 // let money = $.trim($("#money").val());
    	 // let keyword = $.trim($("#keyword").val());
    	 // let starTime = $.trim($("#starTime").val());
    	 // let endTime = $.trim($("#endTime").val());
		 // window.location.href="${ctx}/bill/tj/cash/export?minMoney="+money+"&detailKeyword="+keyword
			// 	 +"&starTime="+starTime+"&endTime="+endTime+"&checkedAccount="+parent._checkedAccount.join(',')+"&casemanageId="+caseId;
         var xhr = new XMLHttpRequest();
         var url="${ctx}/bill/tj/cash/export";
         xhr.open('POST', url, true);
         xhr.responseType = "blob";  // 返回类型blob
         // 定义请求完成的处理函数
         xhr.onload = function () {
             // 请求完成
             if (this.status === 200) {
                 var content = this.response;
                 var aTag = document.createElement('a');
                 var blob = new Blob([content]);
                 var headerName = xhr.getResponseHeader("Content-disposition");
                 var fileName = decodeURIComponent(headerName).substring(20);
                 aTag.download = fileName;
                 aTag.href = URL.createObjectURL(blob);
                 aTag.click();
                 URL.revokeObjectURL(blob);
             }
         };
         // 发送ajax请求
         var formdata=new FormData();
         formdata.append("minMoney",$.trim($("#money").val()));
         formdata.append("detailKeyword",$.trim($("#keyword").val()));
         formdata.append("starTime",$.trim($("#starTime").val()));
         formdata.append("endTime",$.trim($("#endTime").val()));
         formdata.append("checkedAccount",parent._checkedAccount.join(','));
         formdata.append("casemanageId",caseId);
         xhr.send(formdata);
	 }
	 
	 function _checkedCallback(){
		 queryList();
	 }
	 
	 function viewCash(card){
		 base.getView({
				url:"${ctx}/bill/tj/cashList?accountBodyCard="+card,
				success:function(result){
					bootbox.dialog({
						message:result,
						size:"large",
						boxCss:{"width":"1270px"},
						closeButton : true
					})
				}
			});
	 }
</script>
<style>
	input#endTime {
		width: 120px;
	}
	input#starTime {
		width: 120px;
	}
	.input-group {
		margin-right: 5px;
	}
	input#maxmoney {
		width: 120px;
	}
	input#minmoney {
		width: 120px;
	}
	input#keyword {
		width: 175px;
	}
	.mbactive{
		color:#287CDF;
	}
	#spantitle{
		height: 30px;
		background-color: #f4f4f4;
		border: solid 1px #cbcbcb;
		border-bottom: none;
	}
	input.btn.btn-primary.daobtn{
		background-color: #23B7E5;
		border-color: #23B7E5
	}
    span#spantitle{
        top: 0;
    }
	.form-group.form_z.ml10 {
		margin-right: 5px;
	}
	input.error { border: 1px solid red; }
	label.error {
		background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;
		padding-left: 16px;
		padding-bottom: 2px;
		font-weight: bold;
		color: #EA5200;
	}
	.box-header .row label{
		margin-right: 5px;
		color: #6f7689;
		font-size: 13px;
		font-weight: 400;
	}
	element.style {
		height: 700px;
	}
	.badge{
		background-color: #f7051f;
	}
	.bill-buttonarea .btn{
		margin-right: 12px;
	}
    .bill-buttonarea .btn{
        width: 70px;
        margin-right: 13px;
    }
    .ml10{
        margin-left: 0px;
    }
    .btn-primary:active:focus{
        background-color: #4695ed;
        border-color: #4695ed;
    }
	div#inAccount {
		margin-left: 240px;
	}
	.casemanage-switch .casemanage-zhexiantu.active {
		background-color: #4695ed;
	}
	.casemanage-switch .casemanage-zhexiantu {
		background-color: #f2f6f9;
		float: left;
		width: 70px;
		height: 30px;
		display: block;
		cursor: pointer;
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
		line-height: 30px;
		text-align: center;
	}
	#font_zhexian{
		color: #C1C2C3;
		font-size: 18px;
	}
	#font_zhexian.active{
		color: #F4F9FE;
	}
	.content {
		padding: 10px;
	}
	.box{
		padding: 0;
	}
	.box-body .title{
		font-size:14px;
		line-height:30px;
	}
	.box-body .casemanage-switch{
		margin:0;
	}
    .btn-primary{
        background-color:#4695ed;
        border-color:#4695ed;
    }
    .btn-primary:hover, .btn-primary:active, .btn-primary.hover{
        background-color:#61a8f5;
        border-color:#61a8f5;
    }
	.btn-primary.focus, .btn-primary:focus{
		background-color:#4695ed;
		border-color:#4695ed;
	}
	.form-control{
		border-radius:4px;
		font-size: 12px;
		border-color: #e4e4e4;
	}
	.input-group .form-control:first-child{
		border-top-right-radius:4px;
		border-bottom-right-radius: 4px;
	}
	.form-control:focus{
		border-color:#4695ed;
	}
	.form-control:hover{
		border-color:#4695ed;
	}
	input#minmoney{
		border-radius: 0;
	}
	input#maxmoney{
		border-radius: 0;
	}
	input#keyword{
		border-radius: 0;
	}
	input#starTime{
		border-radius: 0;
	}
	input#endTime{
		border-radius: 0;
	}
	.glyphicon-calendar {
		top: 9px;
	}
</style>